<template>
  <div class="content">
    <header></header>
    <banner></banner>
    <div class="newsList">
      <ul>
        <li v-for="(item, index) in bannerList" :key="index">
          <router-link :to="'/article/'+item.id">
            <h2>{{index+1}} . {{item.title}}</h2>
            <p>{{item.detail}}</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import Banner from './Banner.vue'
  import Header from './Header.vue'
  export default {
    data () {
      return {
        bannerList: []
      }
    },
    mounted () {
      this.fetchBannerData()
    },
    methods: {
      fetchBannerData: function () {
        this.$http.get('src/data/index.json').then((res) => {
          this.bannerList = res.data
          console.log(res.data)
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    components: {
      Banner
    }
  }
</script>
